<template>

	<view class="cusList-wrap">
		<view class="cusList" v-for="(item,index) in list" :key="index"
			@click="meterCustomerDeatilTo(item.consultId)">
			<view class="top">
				<view class="cus-name">
					<text>{{item.consultants}}</text>
				</view>

				<view class="cus-sex">
					<view>{{item.genderText}}</view>
				</view>

				<view class="cus-age">
					<text>{{item.age}}岁</text>
				</view>

				<view class="cus-time">
					<text>{{item.visitDate}}</text>
				</view>
			</view>
			<view class="splitLine"></view>


			<view class="bom">
				<view class="cus-receptionistMan">
					<text>接待人：</text>
					<text>{{item.receptionistMan}}</text>
				</view>

				<view class="jiantou">
					<!-- <text>></text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			meterCustomerDeatilTo(consultId) {
				uni.navigateTo({
					url: "/pages/customerSearch/customerDeatil?consultId=" + consultId
				})
			},
		}
	}
</script>

<style>
	.cusList-wrap {
		margin-top: 20rpx;
	}

	.cusList {
		border-radius: 7px;
		height: 160rpx;
		width: 95%;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		box-shadow: 0px 3px 1px #bec0c4;
		display: flex;
		/* justify-content: space-between; */
		/* align-items: center; */
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.top {
		width: 100%;
		display: flex;
		flex-direction: row;
		/* border: 1rpx solid; */
		height: 50%;
	}

	.splitLine {
		width: 95%;
		height: 2rpx;
		border-top: solid #ACC0D8 1px;
	}

	.bom {
		width: 100%;
		/* border: 1rpx solid; */
		height: 49%;
		display: flex;
		flex-direction: row;
	}

	.left-img {
		width: 96rpx;
		height: 96rpx;
		margin-bottom: 70rpx;
		z-index: 0;
	}

	.cusGrade {
		/* border: 1rpx solid; */
		width: 15%;
		height: 100%;
		transform: rotate(-45deg);
		margin-top: 12rpx;
		margin-left: -102rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.cus-name {
		/* border: 1rpx solid; */
		/* height: 100%; */
		margin-left: 6%;
		width: 24%;
		/* font-weight: bold; */
		font-size: 28rpx;
		display: flex;
		align-items: center;
		color: #000000;
	}

	.cus-sex {
		/* border: 1rpx solid; */
		width: 10%;
		height: 100%;
		margin-left: 5%;
		font-size: 28rpx;
		/* color: #c9c9c9; */
		display: flex;
		align-items: center;
		color: #000000;
	}

	.cus-age {
		/* border: 1rpx solid; */
		width: 16%;
		height: 100%;
		font-size: 28rpx;
		/* color: #c9c9c9; */
		display: flex;
		align-items: center;
		color: #000000;
	}

	.cus-time {
		/* border: 1rpx solid; */
		width: 35%;
		height: 100%;
		margin-left: 13%;
		font-size: 12rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		/* color: #c0c0c0; */
		color: #000000;
	}


	.cus-receptionistMan {
		font-size: 28rpx;
		/* font-weight: bold; */
		color: #959595;
		width: 80%;
		/* border: 1rpx solid; */
		display: flex;
		/* justify-content: center; */
		align-items: center;
		color: #c9c9c9;
		margin-left: 6%;
		/* color: #c0c0c0; */
	}

	.jiantou {
		/* float: right; */
		color: #007AFF;
		margin-right: 20rpx;
		font-size: 40rpx;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		width: 15%;
	}
</style>
